<template>
	<view class="container">

		<!-- 搜索框 -->
		<view class="search-box">
			<input type="text" placeholder="查找我的族谱" />
			<!-- <button @click="createGenealogy">搜索</button> -->
			<uni-icons id="search-box-plus" type="plus" size="36" @click="createGenealogy" />
		</view>

		<!-- 筛选条件 -->
		<view class="filter-box">
			<picker @change="bindPickerChange">
				<view class="uni-input">按类型</view>
			</picker>
			<picker @change="bindPickerChange">
				<view class="uni-input">按时间</view>
			</picker>
			<picker @change="bindPickerChange"><!-- :value="index" :range="array" -->
				<view class="uni-input">按姓氏</view>
			</picker>
		</view>

		<!-- 族谱列表 -->
		<view class="genealogy-list">
			<block v-for="(item, index) in genealogyList" :key="index">
				<view class="genealogy-item" @click="navigationToIndex(item)">
					<image :src="item.cover" mode="aspectFit"></image>
					<view class="genealogy-item-title">{{ item.genealogyName }}</view>
					<view class="genealogy-info">
						<view class="genealogy-info-title">{{ item.genealogyName }}</view>
						<view>家族成员：{{ item.membersCount }}人</view>
						<view>根地区：{{ item.rootRegion }}</view>
						<view>修订时间：{{ item.updateTime }}</view>
					</view>
					<view class="example-tag" v-if="item.isExample">示例</view>
				</view>
			</block>

			<!-- 提示信息 -->
			<view class="no-data" v-if="genealogyList.length === 1">
				<image src="/static/no-data.png" mode="aspectFit"></image>
				<text>还没有族谱信息，创建一个吧</text>
				<button @click="createGenealogy">创建族谱</button>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		getGenealogyList,
		getGenealogy
	} from '@/api/record/genealogy.js'
	export default {
		data() {
			return {
				isOnLoad: false,
				genealogyList: [{
					genealogyId: 0,
					cover: '/static/book.jpeg',
					genealogyName: '杨氏族谱',
					membersCount: 8,
					rootRegion: '北京市东城区',
					updateTime: '2024-09-24 09:24',
					isExample: true
				}],
				query: {
					pageNum: 0,
					pageSize: 10000
				},
			};
		},
		onLoad() {
			getGenealogyList(this.query).then(response => {
				//this.genealogyList = response.rows
				if (response.rows != undefined && response.rows.length != 0) {
					this.genealogyList = [];
				}
				for (var item of response.rows) {
					item.cover = '/static/book.jpeg';
					this.genealogyList.push(item)
				}
				this.isOnLoad = true;
				console.log(response)
			});
			console.log('response')
		},
		onShow() {
			if(!this.isOnLoad){
				return;
			}
			getGenealogyList(this.query).then(response => {
				//this.genealogyList = response.rows
				if (response.rows != undefined && response.rows.length != 0) {
					this.genealogyList = [];
				}
				for (var item of response.rows) {
					item.cover = '/static/book.jpeg';
					this.genealogyList.push(item)
				}
				console.log(response)
			});
			console.log('onShow response')
		},
		methods: {
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value);
				this.index = e.target.value;
			},
			createGenealogy() {
				// 创建族谱的逻辑
				uni.navigateTo({
					url: '/pages/package/genealogy/edit'
				});
			},
			navigationToIndex(item) {
				// 创建族谱的逻辑
				uni.navigateTo({
					url: '/pages/package/genealogy/detail?genealogyId=' + item.genealogyId
				});
			}
		}
	};
</script>


<style>
	.container {
		padding: 20px;
	}

	.search-box {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.search-box input {
		width: 90%;
		background-color: white;
		height: 38px;
		padding: 20px;
		border-radius: 19px;
	}

	#search-box-plus {
		margin-left: 20px;
	}

	.filter-box {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20px;
	}

	.genealogy-list {
		margin-bottom: 20px;
	}

	.genealogy-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		position: relative;
	}
	
	.genealogy-info-title {
	    background-color: #037aff;
	    color: white;
	    line-height: 20pt;
	    padding-left: 10pt;
	    padding-right: 10pt;
	    width: fit-content;
	    border-radius: 3pt;
	}

	.genealogy-item image {
		width: 100px;
		height: 150px;
		margin-right: 10px;
	}

	.genealogy-item-title {
		writing-mode: vertical-rl;
		text-orientation: upright;
		position: absolute;
		left: 69px;
		z-index: 10;
	}

	.genealogy-info {
		flex: 1;
	}

	.genealogy-info>view {
		margin-bottom: 10px;
	}

	.genealogy-info-title {
		/* font-size: 16px; 
		font-weight: bold;*/
	}

	.example-tag {
		position: absolute;
		top: 0;
		right: 0;
		background-color: orange;
		color: white;
		padding: 5px 10px;
	}

	.no-data {
		text-align: center;
		margin-top: 50px;
	}

	.no-data image {
		width: 100px;
		height: 100px;
	}

	.no-data text {
		margin: 10px 0;
	}

	.no-data button {
		padding: 10px 20px;
	}
</style>